<template>
  <div class="limitdivc">
    <el-form
      :label-position="labelPosition"
      label-width="125px"
      ref="propertycostvue"
      class="demo-ruleForm"
      :model="propertycostvue"
    >
      <el-row :gutter="20" style="width:100%;">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="物业费单号">
              <el-input v-model="propertycostvue.propertycost.propFId" disabled></el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="业主姓名">
              <el-input v-model="propertycostvue.owner.ownerName" disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="width:100%;">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="住房面积">
              <el-input v-model="propertycostvue.owner.ownerHome" disabled>
                <template slot="append">㎡</template>
              </el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="缴纳时长" prop="parkingTime">
              <el-select
                v-model="propertycostvue.mouth"
                @change="changetime(propertycostvue.mouth)"
                :disabled="isable"
              >
                <el-option-group v-for="group in options3" :key="group.label" :label="group.label">
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="width:100%;">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="物业费单价">
              <el-input v-model="propertycostvue.price" disabled>
                <template slot="append">元/㎡</template>
              </el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="物业费总计">
              <el-input v-model="propertycostvue.propertycost.propCost" disabled>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="width:100%;">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="物业费缴纳时间">
              <el-date-picker
                class="dateinputc"
                disabled
                v-model="propertycostvue.propertycost.propBeginDate"
                type="date"
                placeholder="date"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="物业费应缴时间">
              <el-date-picker
                class="dateinputc"
                disabled
                v-model="propertycostvue.propertycost.propEndDate"
                type="date"
                placeholder="date"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-button
      class="buttenstylec"
      type="primary"
      @click="centerDialogVisible = true"
      :disabled="isable"
    >确认缴费</el-button>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      :show-close="false"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <span>请确认信息并缴费</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitproperty">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>尊敬的业主，现在还未到收缴的日期，请在指定日期进行缴纳！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isable: false,
      dialogVisible: false,
      centerDialogVisible: false,
      labelPosition: "right",
      propertycostvue: {
        propertycost: {
          propFId: "123", //物业费id
          propPrice: "0.6", //物业费单价
          propBeginDate: "2020/4/4", //收缴的日期
          propEndDate: "2021/4/4", //应收缴日期
          propCost: "" //物业费总计
        },
        owner: {
          ownerHome: "100",
          ownerName: "软件163 "
        },
        price: "",
        bool: "",
        mouth: "",
        
      },
      options3: [
        {
          label: "快速方案",
          options: [
            {
              value: 12,
              label: "一年"
            },
            {
              value: 6,
              label: "半年"
            }
          ]
        },
        {
          label: "其他方案",
          options: [
            {
              value: 3,
              label: "3个月"
            },
            {
              value: 6,
              label: "6个月"
            },
            {
              value: 9,
              label: "9个月"
            },
            {
              value: 12,
              label: "12个月"
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    changetime(key) {
      this.propertycostvue.mouth = key;
      this.axios
        .post("cost/postpropmouth?mouth=" + key,this.propertycostvue.propertycost)
        .then(res => {
          // this.propertycostvue.propertycost.propBeginDate=this.propertycostvue.propertycost.propEndDate
          this.propertycostvue.propertycost.propEndDate = res.data[0];
          this.propertycostvue.propertycost.propBeginDate=res.data[1];
          this.propertycostvue.propertycost.propCost = res.data[2];
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
      console.log(key);
    },
    submitproperty() {
       console.log(this.propertycostvue.propertycost);
      this.axios
        .post("cost/postpropertycost", this.propertycostvue.propertycost)
        .then(res => {
         
          // this.propertycostvue.bool = res.data.bool;
          // this.propertycostvue.mouth = res.data.mouth;
          // this.propertycostvue.owner = res.data.list[0];
          // this.propertycostvue.propertycost = res.data.list[1];
          // this.propertycostvue.price = res.data.list[2].price;

          if (!res.data) {
            this.$alert("缴费成功！", "操作成功", {
              confirmButtonText: "确定",
              callback: action => {
                this.dialogVisible = true;
                this.isable = true;
                window.location.reload();
              }
            });
          }
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
      this.centerDialogVisible = false;
    }
  },
  created() {
    this.owner_name = sessionStorage.getItem("userName");
    this.ownerId = sessionStorage.getItem("userId");
    this.axios
      .post("cost/showpropertycost?ownerId=" + this.ownerId)
      .then(res => {
        this.propertycostvue.bool = res.data.bool;
        this.propertycostvue.owner = res.data.list[0];
        this.propertycostvue.propertycost = res.data.list[1];
        this.propertycostvue.price = res.data.list[2].price;
        console.log(res.data);
        if (!this.propertycostvue.bool) {
          this.dialogVisible = true;
          this.isable = true;
        }
      })
      .catch(err => {
        console.error(err);
      });
    // console.log(sessionStorage.getItem("userId"));
  },
  components: {}
};
</script>

<style scope>
.buttenstyle {
  position: relative;
  left: 960px;
}
.inputstyle {
  font-size: 25px;
  outline: none;
  text-align: center; /**居中显示 */
}
.divace {
  border: 1px solid rgb(12, 11, 11);
}
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px; /**角度圆滑*/
  min-height: 36px; /**高度 */
  text-align: center; /**居中显示 */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.divcenter {
  /* margin: 0 auto; 
  float:left;
  */
  border: 1px solid #f00;
  width: 50%;
}

.divcontent {
  float: left;
  border: 1px solid rgb(12, 11, 11);
}
</style>
